<script lang="ts">
import { defineComponent, h } from "vue";

export default defineComponent({
    name: "Heading",

    props: {
        level: {
            default: 1,
            type: Number,
        },
    },

    setup({ level }, { slots }) {
        const slot = slots ? slots.default?.() : [];

        // => 通过打印插槽变量观察数据结构进行深度学习
        console.log({ slot, slots });

        // h(<tag-name>,{props/attributes},array-of-child)
        // * 自定义渲染函数必须要通过函数返回其值，原因参考组件的 data 写法即可
        return () => h(`h${level}`, { style: "color:purple" }, slot);
    },
});
</script>
